<style type="text/css">
    html, body { height: 100%; width: 100%; text-align:center; }
</style>
<script>
    // 扫描二维码
    function scanCode(showMsg , suc , err){
        try{
            var canvas = document.getElementById("canvas");
            var context = canvas.getContext("2d");
            var video = document.getElementById("video");
            if(typeof showMsg != "function"){showMsg = alert();}

            var videoObj = { "video": true,audio:false};
            var flag=true;
            var MediaErr = function (error)
            {
                flag = false;
                if (error.PERMISSION_DENIED)
                {
                    showMsg('用户拒绝了浏览器请求媒体的权限', '提示');
                } else if (error.NOT_SUPPORTED_ERROR) {
                    showMsg('对不起，您的浏览器不支持拍照功能，请使用其他浏览器', '提示');
                } else if (error.MANDATORY_UNSATISFIED_ERROR) {
                    showMsg('指定的媒体类型未接收到媒体流', '提示');
                } else {
                    showMsg('系统未能获取到摄像头，请确保摄像头已正确安装。或尝试刷新页面，重试', '提示');
                }
            };

            //获取媒体的兼容代码，目前只支持（Firefox,Chrome,Opera）
            if (navigator.getUserMedia)
            {
                //qq浏览器不支持
                if (navigator.userAgent.indexOf('MQQBrowser') > -1) {
                    alert('对不起，您的浏览器不支持拍照功能，请使用其他浏览器', '提示');
                    return false;
                }
                navigator.getUserMedia(videoObj, function (stream) {
                    video.src = stream;
                    video.play();
                }, MediaErr);
            }
            else if(navigator.webkitGetUserMedia)
            {
                navigator.webkitGetUserMedia(videoObj, function (stream)
                {
                    video.src = window.webkitURL.createObjectURL(stream);
                    video.play();
                }, MediaErr);
            }
            else if (navigator.mozGetUserMedia)
            {
                navigator.mozGetUserMedia(videoObj, function (stream) {
                    video.src = window.URL.createObjectURL(stream);
                    video.play();
                }, MediaErr);
            }
            else if (navigator.msGetUserMedia)
            {
                navigator.msGetUserMedia(videoObj, function (stream) {
                    $(document).scrollTop($(window).height());
                    video.src = window.URL.createObjectURL(stream);
                    video.play();
                }, MediaErr);
            }else{
                showMsg('对不起，您的浏览器不支持拍照功能，请使用其他浏览器');
                return false;
            }
            if(flag){
                showMsg('为了获得更准确的测试结果，请尽量将二维码置于框中，然后进行拍摄、扫描。 请确保浏览器有权限使用摄像功能');
            }
            //这个是拍照按钮的事件，
            $("#snap").click(function () {startPat();}).show();
        }catch(e){
            showMsg("浏览器不支持HTML5 CANVAS");
        }
    }

    // 初始化
    function init(obj,sucFun){
        try{
            var canvas = document.getElementById("canvas");
            var context = canvas.getContext("2d");
            var video = document.getElementById("video");

            var videoObj = { "video": true,audio:false};
            var flag=true;
            var MediaErr = function (error)
            {
                flag = false;
                if (error.PERMISSION_DENIED)
                {
                    return '用户拒绝了浏览器请求媒体的权限';
                } else if (error.NOT_SUPPORTED_ERROR) {
                    return '对不起，您的浏览器不支持拍照功能，请使用其他浏览器';
                } else if (error.MANDATORY_UNSATISFIED_ERROR) {
                    return '指定的媒体类型未接收到媒体流';
                } else {
                    return '系统未能获取到摄像头，请确保摄像头已正确安装。或尝试刷新页面，重试';
                }
            };

            //获取媒体的兼容代码，目前只支持（Firefox,Chrome,Opera）
            if (navigator.getUserMedia)
            {
                //qq浏览器不支持
                if (navigator.userAgent.indexOf('MQQBrowser') > -1) {
                    return '对不起，您的浏览器不支持拍照功能，请使用其他浏览器';
                }
                navigator.getUserMedia(videoObj, function (stream) {
                    video.src = stream;
                    video.play();
                }, MediaErr);
            }
            else if(navigator.webkitGetUserMedia)
            {
                navigator.webkitGetUserMedia(videoObj, function (stream)
                {
                    video.src = window.webkitURL.createObjectURL(stream);
                    video.play();
                }, MediaErr);
            }
            else if (navigator.mozGetUserMedia)
            {
                navigator.mozGetUserMedia(videoObj, function (stream) {
                    video.src = window.URL.createObjectURL(stream);
                    video.play();
                }, MediaErr);
            }
            else if (navigator.msGetUserMedia)
            {
                navigator.msGetUserMedia(videoObj, function (stream) {
                    $(document).scrollTop($(window).height());
                    video.src = window.URL.createObjectURL(stream);
                    video.play();
                }, MediaErr);
            }else{
                return '对不起，您的浏览器不支持拍照功能，请使用其他浏览器';
            }
            if(flag){
                return '为了获得更准确的测试结果，请尽量将二维码置于框中，然后进行拍摄、扫描。 请确保浏览器有权限使用摄像功能';
            }

            //这个是拍照按钮的事件，
            $(obj).click(function () {
                startPat(sucFun);
            }).show();
        }catch(e){
            return "浏览器不支持HTML5 CANVAS";
        }
    }

    //打印内容到页面
    function printHtml(content){
        $(window.document.body).append(content+"<br/>");
    }

    // 开始拍照
    function startPat(success){
        // 防止调用过快
        setTimeout(function(){
            if(context)
            {
                context.drawImage(video, 0, 0, 320, 320);
                CatchCode(success);
            }
        },200);
    }

    // 抓屏获取图像流，并上传到服务器
    function CatchCode(success) {
        if (canvas != null) {
            //以下开始编 数据
            var imgData = canvas.toDataURL();

            // 将图像转换为base64数据
            // 在前端截取22位之后的字符串作为图像数据
            var base64Data = imgData;
            // 开始异步上
            $.post("/index.php/Admin/Tool/scanCode", {"img": base64Data}, function (result) {
                // 扫描成功
                if (result.code == 0) {
                    if (typeof success == "function") {
                        success(result.data);
                    }
                } else {
                    // 如果没有解析出来则重新抓拍解析
                    startPat(success);
                }
            }, "json");
        }
    }
</script>
<div id="contentHolder">
    <video id="video" width="320" height="320" autoplay></video>
    <canvas style="display:none; background-color:#F00;" id="canvas" width="320" height="320"></canvas>
</div>